<template>
  <div class="container">
    <div class="box" :style="{background:`rgb(${r},${g},${b})`}"></div>
    <p>R({{r}}):<input type="range" min="0" max="255" value="0" v-model="r"/></p>
    <p>G({{g}}):<input type="range" min="0" max="255" value="0" v-model="g"/></p>
    <p>B({{b}}):<input type="range" min="0" max="255" value="0" v-model="b"/></p>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
       r:0,
       g:0,
       b:0
    }
  },
};
</script>

<style scoped lang='less'>
.container {
  width: 600px;
  height: 100px;
  .box {
    width: 100%;
    height: 100px;
    background: #000;
  }
  p {
    margin: 20px 0px;
  }
}
</style>
